export  class Component{
        constructor(){
            this.children = [];
        }
        setAttribute(name, val){
            this[name] = val
        }
        mountTo(dom){
           let vmNode = this.render();
           vmNode.mountTo(dom)
        }
        appendChild(vChildren){
            this.children.push(vChildren)
        }

}
class ElementWapper{
     constructor(content) {
         this.root = document.createElement(content);
     }
     setAttribute(name, value){
         this.root.setAttribute(name, value);
     }
     appendChild(child){
         child.mountTo(this.root);
     }
     mountTo(parentNode){
         parentNode.appendChild(this.root);
     }
}
class TextWapper{
    constructor(content) {
         this.root = document.createTextNode(content);
    }
    mountTo(parentNode){
         parentNode.appendChild(this.root);
     }
}
export let toReact = {
    createElement:function(type, ops, ...children){
        let el;
        if(typeof type === 'string'){
            el = new ElementWapper(type)
        }else{
            el  = new type;
        }
        // if(name in ops){
        //     el.setAttribute(name, ops[name]);
        // }
        const insertChildren = function (children) {
              for (const chi of children) {
                  if(typeof chi === 'object' && chi instanceof Array){
                      insertChildren(chi)
                  }else{
                        // debugger
                        if(!(chi instanceof Component) &&!(chi instanceof ElementWapper) && !(chi instanceof TextWapper) ){
                            chi = String(chi)
                        }
                        if(typeof chi === 'string'){
                            // console.log(chi)
                            chi = new TextWapper(chi);
                        }
                        el.appendChild(chi);
                  }
                   
                }
        }
        insertChildren(children)
        return el;
    },
    render(vmNode, dom){
        vmNode.mountTo(dom);
    }
}